new Vue({
    el: '#app',
    data: {
        legendData: ['未结算', '已结算'],
        xAxisData: '',
        seriesDataWjs: '',
        seriesDataYjs: '',
        seriesDataJe:'',
        yhList: [],
        form: '',
        selectValue: '',
        myChart:''
    },
    methods: {
        getYh: function () {
            let _self = this;
            $.ajax({
                type: 'get',
                url: '../../../hwys/yhxx',
                data: {},
                dataType: 'json',
                success: function (data) {

                    _self.yhList = data;
                    layui.use(['form'], function () {
                        _self.form = layui.form;
                        _self.form.on('select(yhxx)', function (data) {
                            _self.selectValue = data.value;
                        });

                    });

                },
                error: function (error) {
                    alert(error);
                }
            });
        },
        getChart: function () {
            let _self = this;
            $.ajax({
                type: 'get',
                url: '../../../hwys/zmtj',
                data: {
                    khxm: _self.selectValue
                },
                dataType: 'json',
                success: function (data) {
                    alert(data)
                    if (data.FLAG == 1) {
                        let res = data.DATA;
                        if (res.length > 0) {
                            _self.xAxisData=new Array();
                            _self.seriesDataWjs=new Array();
                            _self.seriesDataYjs=new Array();
                            _self.seriesDataJe=new Array();
                            for (let i = 0; i < res.length; i++) {
                                _self.xAxisData.push(res[i].khxm);
                                _self.seriesDataWjs.push(res[i].wjs);
                                _self.seriesDataYjs.push(res[i].yjs);
                                _self.seriesDataJe.push(res[i].je);
                            }
                        }

                        let option = {
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                                }
                            },
                            legend: {
                                data: ['已报价', '未报价']
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: {
                                type: 'category',
                                data: _self.xAxisData
                            },
                            yAxis: {
                                type: 'value'

                            },
                            series: [
                                {
                                    name: '已报价',
                                    type: 'bar',
                                    stack: '数量',
                                    label: {
                                        normal: {
                                            show: true,
                                            position: 'inside'
                                        }
                                    },
                                    data: _self.seriesDataYjs
                                },
                                {
                                    name: '未报价',
                                    type: 'bar',
                                    stack: '数量',
                                    label: {
                                        normal: {
                                            show: true,
                                            position: 'inside'
                                        }
                                    },
                                    data: _self.seriesDataWjs
                                }


                            ]
                        };
                        _self.myChart.setOption(option);
                    }


                },
                error: function (error) {
                    alert(error);
                }
            });
        }
    },
    mounted: function () {
        let _self = this;
        this.myChart=echarts.init(document.getElementById('charts'));


        _self.getYh();


    }
});